<script>
import {userStatus} from "@/pinia/userStatus"
import {ref} from 'vue'

export default {
  props: ['huiDaoXian'],
  emits: ['changeComponent', 'huiDaoCome'],
  setup(props, {emit}) {
    const user = userStatus()
    const ling_chong = user.ling_chong
    let harvest_velocity = ref(0)

    return {
      user,
      ling_chong,
      harvest_velocity,
      ling_chong_work(v) {
        if (user.ling_chong[v].state === 'work') {
          user.ling_chong[v].state = 'rest'
        } else {
          user.ling_chong[v].state = 'work'
        }
        this.harvest_velocity = this.user.ling_shi_load_velocity()
      },
      hui_dao_xian() {
        props.huiDaoXian()
      },
      hui_dao_come() {
        emit('huiDaoCome')
      },
      change_component(num) {
        emit('changeComponent', num)
      }
    }
  },
  created() {
    this.harvest_velocity = this.user.ling_shi_load_velocity()
  }
}
</script>

<template>
  <div class="ling_kuang">
    <n-divider>宗门（灵矿）</n-divider>
    <div class="xiu_xing_xuan_zhe">
      <n-list clickable :show-divider="false">
        <n-list-item @click="hui_dao_xian()">
          <n-gradient-text gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)"> 修行</n-gradient-text>
        </n-list-item>
        <n-list-item @click="hui_dao_come()">
          <n-gradient-text gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)"> 宗门</n-gradient-text>
        </n-list-item>
      </n-list>
    </div>
    <div class="zhong_men_xuan_zhe">
      <n-list clickable :show-divider="false">
        <n-list-item @click="change_component('2')">
          <n-gradient-text gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)"> 坊市</n-gradient-text>
        </n-list-item>
        <n-list-item @click="change_component('8')">
          <n-gradient-text gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)"> 灵宠</n-gradient-text>
        </n-list-item>
      </n-list>
    </div>
    <div class="ling_kuang_description">
      深山之中有一灵矿，可驱使灵宠前往探索，有概率获得灵石。灵宠的获取可在宗门圈养中获得，也可以在坊市中购买。过度压榨灵宠会降低它的忠诚度。
    </div>
    <div class="ling_kuang_ling_shou">
      <!-- 动态样式绑定 -->
      <div class="ling_kuang_ling_chong" v-for="(v,i) in ling_chong">
        <div class="ling_chong_image">
          <n-image width="68" height="68" :src="v.image"/>
        </div>
        <div class="ling_chong_xiang_qing">
          <div> {{ v.name }}</div>
          <div> {{ v.velocity }}/次</div>
          <n-switch checked-value="work" unchecked-value="rest" :value="v.state" @update:value="ling_chong_work(i)">
            <template #checked>
              劳作
            </template>
            <template #unchecked>
              休息
            </template>
          </n-switch>
        </div>
      </div>
    </div>
    <div class="ling_kuang_ling_shi">
      <div> 灵石探索效率：{{ harvest_velocity }}</div>
      <div> 拥有灵石：{{ user.wallet.ling_shi }}</div>
    </div>
  </div>
</template>

<style scoped>
.ling_kuang {
  position: relative;
  height: 680px;
}

.xiu_xing_xuan_zhe {
  position: absolute;
  width: 128px;
  left: 8px;
  bottom: 18px;
}

.zhong_men_xuan_zhe {
  position: absolute;
  width: 128px;
  right: 8px;
  bottom: 18px;
}

.ling_kuang_description {
  /** 文字首行缩进 */
  text-indent: 2em;
  position: absolute;
  left: 8px;
  right: 6px;
}

.ling_kuang_ling_shou {
  position: absolute;
  top: 128px;
  left: 8px;
  right: 6px;
  bottom: 8px;

  margin: 0 auto;
  width: 400px;
  height: 400px;

  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-content: flex-start;
}

.ling_kuang_ling_chong {
  width: 180px;
  height: 78px;
  margin-top: 8px;
  text-align: center;
  /*line-height: 68px;*/
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 1px 1px 0 #ccc;

  display: flex;
  justify-content: space-between;
}

.ling_chong_image {
  width: 78px;
  height: 78px;

  margin-left: 8px;

  display: flex;
  align-items: center;

}

.n-image {
  border-radius: 5px;
}

.ling_chong_xiang_qing {
  width: 68px;
  height: 78px;

  margin-right: 8px;
}

.ling_kuang_ling_shi {
  position: absolute;
  left: 8px;
  right: 6px;
  bottom: 88px;

  display: flex;
  justify-content: space-around;
}

.n-list {
  background-color: inherit !important;
  user-select: none;

  display: flex;
  justify-content: space-around;
  z-index: 999;
}

</style>
